<!-- html -->
<template>
    <h1 class="h1">组件通信</h1>
    <span class="span1" @click="htmlRefTest1">页面标签使用ref</span>
    <span class="span1" @click="propsTest1">props</span>
    <span class="span1" @click="propsTest2">$attrs</span>
    <span class="span1" @click="exposeTest1">expose</span>
    <span class="span1" @click="exposeTest2">$refs与$parent</span>
    <span class="span1" @click="emitsTest1">emits</span>
    <span class="span1" @click="vModelTest1">v-model</span>
    <span class="span1" @click="provideInjectTest1">provide与inject</span>
    <span class="span1" @click="mittTest1">mitt</span>
    <hr>
    <RouterView />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
    name: 'componentTransmitHome'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { useRouter } from 'vue-router'
//数据
let router = useRouter()
//方法
function htmlRefTest1() {
    router.push({
        path: '/componentTransmitHome/htmlRefTest1'
    })
}
function propsTest1() {
    router.push({
        path: '/componentTransmitHome/propsTest1'
    })
}
function propsTest2() {
    router.push({
        path: '/componentTransmitHome/propsTest2'
    })
}
function exposeTest1() {
    router.push({
        path: '/componentTransmitHome/exposeTest1'
    })
}
function exposeTest2() {
    router.push({
        path: '/componentTransmitHome/exposeTest2'
    })
}
function emitsTest1() {
    router.push({
        path: '/componentTransmitHome/emitsTest1'
    })
}
function vModelTest1() {
    router.push({
        path: '/componentTransmitHome/vModelTest1'
    })
}
function provideInjectTest1() {
    router.push({
        path: '/componentTransmitHome/provideInjectTest1'
    })
}
function mittTest1() {
    router.push({
        path: '/componentTransmitHome/mittTest1'
    })
}
</script>

<!-- 样式 -->
<style scoped></style>